<template>
  <div>
    <main>
      <div class="title">
        <div :class="{ active: currentPage === 'xxzlDownload' }">
          学习资料下载
        </div>
      </div>
  
      <div class="downlist">
        <ul>
          <li v-for="(item, index) in fileList" :key="index">
            <span
              >{{ item.name
              }}<span class="vipdload" v-if="item.isVip == '1'"
                >VIP可下</span
              ></span
            >
            <span
              class="dld"
              @click="getFile(item.id)"
              v-if="userInfo.type == '1' || item.isVip == '0'"
              ><router-link to="">下载</router-link></span
            >
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      currentPage: 'jjDownload',
      fileList: [],
      url: '',
      userInfo: ''
    }
  },
  created () {
    this.getFileList()
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  methods: {

    getFile (fileId) {
      // console.log(fileId);
      this.getFileUrl(fileId)
      this.downLoadFile(this.url)
    },

    // filerName (url) {
    //   // 提取下载的文件名
    //   let a = url.split('/');
    //   return a[a.length - 1];
    // },
    // // 文件下载方法
    // downLoadFile (url) {
    //   var eleLink = document.createElement('a');
    //   eleLink.style.display = 'none';
    //   eleLink.download = this.filerName(url);
    //   var blob = new Blob([url]);
    //   eleLink.href = URL.createObjectURL(blob);
    //   document.body.appendChild(eleLink);
    //   eleLink.click();
    //   document.body.removeChild(eleLink);
    // },
    // 获取下载地址
    getFileUrl (fileId) {
      sendPost(api.getFileUrl, { id: fileId }).then(res => {
        // console.log(res.data);
        this.url = res.data
        window.open(res.data) 
      })
    },
    // 获取获取文件下载列表
    getFileList (type) {

      sendPost(api.getFileList, {
        page: 1,
        rows: 20,
        type: 2,
      }).then(res => {
        // console.log(res);
        this.fileList = res.data.list
      })
    }
  }
}
</script>

<style lang="less" scoped>
main {
  padding: 0 1.25rem;
  box-sizing: border-box;
  .title {
    height: 4.875rem;
    font-weight: bold;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    display: flex;
    div {
      width: 12.5rem;
      height: 3.125rem;
      text-align: center;
      line-height: 3.125rem;
      font-size: 1.125rem;
      color: #999;
      margin-top: 0.875rem;
      cursor: pointer;
      background-color: #ededed;
    }
  }
  .downlist {
    padding: 1.875rem 0 0;
    ul {
      li:hover {
        background-color: #eee;
      }
      li {
        height: 3rem;
        line-height: 3rem;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        display: flex;
        justify-content: space-between;
        .dld {
          cursor: pointer;
          margin-top: 0.9375rem;
          margin: auto 0;
          margin-right: 1rem;
          width: 4.5rem;
          height: 1.875rem;
          line-height: 1.875rem;
          text-align: center;
          color: #ff5e4e;
          border-radius: 0.1875rem;
          font-size: 0.875rem;
          border: 1px solid #ff5e4e;
          box-sizing: border-box;
          a {
            color: #ff5e4e;
          }
        }
        .vipdload {
          display: inline-block;
          width: 4.3125rem;
          height: 1.5rem;
          line-height: 1.5rem;
          background: #ff5e4e;
          font-size: 0.875rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffdc91;
          margin-left: 0.625rem;
          text-align: center;
          box-sizing: border-box;
          border-radius: 0.75rem 0.75rem 0.75rem 0px;
        }
      }
    }
  }
}
.active {
  background-color: #ff5e4e !important;
  color: #fff !important;
}
</style>
